import React, { useMemo, useState } from "react";
import { useSelector } from "react-redux";
import { useLocation, useNavigate } from "react-router-dom";
import { Button, Cell, NavBar } from "react-vant";

function Index() {
  const location = useLocation();
  const v = location.state;
  console.log(v);
  const date = localStorage.getItem("date");
  const navigate = useNavigate();
  const arr = ["A", "B", "C", "D", "F"];
  const [value, setValue] = useState([]);

  //跳转到选择乘客
  const handlePerson = () => {
    navigate("/person");
  };

  //获取仓库人员信息
  const person = useSelector((state) => state.person.personList);

  //useMemo 减少渲染次数，提升性能
  const selectTrue = useMemo(() => {
    return person.filter((item) => item.state);
  }, [person]);
  console.log(value);

  //去往待支付页面
  const goNoPay=(v)=>{
   navigate(`/noPay?price=${v.atp*selectTrue.length}&id=${Math.random().toString()}&title="机票"`,{state:v})
  }

  return (
    <div>
      <NavBar title="填写订单"></NavBar>
      {/* 信息 */}
      <Cell
        title={
          <h4>
            <span>{date}</span>
            <span style={{ margin: "0px 5px" }}>{v.dst}</span>
            <span>
              {v.dasn} ---&gt; {v.aasn}{" "}
            </span>
          </h4>
        }
        label="二等座￥135"
        value="详情"
      ></Cell>

      {/* 选择乘客 */}
      <div style={{ marginTop: "20px" }}>
        <Button block round type="primary" onClick={() => handlePerson()}>
          选择乘客
        </Button>
        <h2>乘客信息</h2>

        {/* 渲染信息 */}
        {selectTrue.map((v) => {
          return (
            <p key={v.id}>
              {v.name}-{v.code}
            </p>
          );
        })}

        {/* 在线选座功能 */}
        <div style={{ marginTop: "20px" }}>
          <h2>在线选座</h2>

          <Button.Group>
            {arr.map((v, i) => {
              return (
                <Button
                  type={value.includes(v) ? "primary" : "default"}
                  key={i}
                  onClick={() =>
                    setValue((prev) => {
                      if (value.includes(v)) {
                        return value.filter((item) => item != v);
                      } else {
                        if (value.length >= selectTrue.length) {
                          return v;
                        }
                        return [...prev, v];
                      }
                    })
                  }
                >
                  {v}
                </Button>
              );
            })}
          </Button.Group>

          <Button block round type="primary" onClick={() => goNoPay(v)}>
          下一步
        </Button>
       
        </div>
      </div>
    </div>
  );
}

export default Index;
